<template>
	<view id="top">
		<view id="header">
			<view id="header-left">
				<!-- 头像 -->
				<view id="head">
					<image src="../../static/images/photo.png" alt=""></image>
				</view>
				<view class="msg">
					<text class="name">{{ loginStore.nikeName }}</text>
					<text class="phone">{{ loginStore.phone }}</text>
				</view>
			</view>
			<view id="header-right" @click="goInfo">
				<text class="iconfont icon-fankuixinxi"></text>
			</view>
		</view>
	</view>
	<view id="content">
		<!-- 就诊人管理、住院人管理 -->
		<view id="card-one">
			<view class="one-left" @click="goPersonSeeMgt">
				<view class="bsize">
					<text class="iconfont icon-gerenzhongxin"></text>
				</view>
				<text class="">就诊人管理</text>
			</view>
			<view class="one-right" @click="goPersonHospitalMgt">
				<view class="bsize">
					<text
						class="iconfont icon-zhuyuanxiyao "
						style="color:red"
					></text>
				</view>
				<text class="">住院人管理</text>
			</view>
		</view>
		<!-- 各项记录 -->
		<view class="record">
			<view class="record-item" @click="goReserveRegRec">
				<view class="record-one">
					<view class="icon">
						<text class="iconfont  icon-yuyueguahao"></text>
					</view>
					<text>预约挂号记录</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>

			<view class="record-item" @click="goOutpatientRec">
				<view class="record-one">
					<view class="icon">
						<text class="iconfont  icon-menzhenjiaofei"></text>
					</view>
					<text>门诊缴费记录</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>
			<view class="record-item" @click="goRechargeRec">
				<view class="record-one">
					<view class="icon">
						<text class="iconfont  icon-chongzhi"></text>
					</view>
					<text>门诊充值记录</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>
			<view class="record-item" @click="goHospitalRechargeRec">
				<view class="record-one">
					<view class="icon">
						<text class="iconfont  icon-3"></text>
					</view>
					<text>住院充值记录</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>
			<view class="record-item" @click="goNcReserveRec">
				<view class="record-one">
					<view class="icon">
						<text
							class="iconfont  icon-hesuanjiance
"
						></text>
					</view>
					<text>核酸预约记录</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>
			<view class="record-item" @click="goExaminationResRec">
				<view class="record-one">
					<view class="icon">
						<text class="iconfont  icon-tijianyuyue"></text>
					</view>
					<text>体检预约记录</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>
			<view class="record-item" @click="goApplicationRecord">
				<view class="record-one">
					<view class="icon">
						<text class="iconfont  icon-bingan"></text>
					</view>
					<text>病案申请邮寄记录</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>
			<view class="record-item" @click="goProblemFeedback">
				<view class="record-one">
					<view class="icon">
						<text
							class="iconfont  icon-fankuixinxi
"
						></text>
					</view>
					<text>问题反馈</text>
				</view>
				<view class="record-two">
					<text class="iconfont  icon-xiangyou1"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { useLoginStore } from '@/store/loginStore.js'
const loginStore = useLoginStore()
// 就诊人管理
let goPersonSeeMgt = () => {
	uni.navigateTo({
		url: '/pages/personSeeMgt/personSeeMgt/personSeeMgt'
	})
}
// 住院人管理
let goPersonHospitalMgt = () => {
	uni.navigateTo({
		url: '/pages/personHospital/personHospitalMgt/personHospitalMgt'
	})
}
// 预约挂号记录
let goReserveRegRec = () => {
	uni.navigateTo({
		url: '/pages/allRecord/reserveRegDetail/reserveRegDetail'
	})
}
// 门诊缴费记录
let goOutpatientRec = () => {
	uni.navigateTo({
		url: '/pages/allRecord/outpatientRec/outpatientRec'
	})
}
// 门诊充值记录
let goRechargeRec = () => {
	uni.navigateTo({
		url: '/pages/selfPayment/rechargeRecord/rechargeRecord'
	})
}
// 住院充值记录
let goHospitalRechargeRec = () => {
	uni.navigateTo({
		url: '/pages/allRecord/hospitalRechargeRec/hospitalRechargeRec'
	})
}
// 核酸预约记录
let goNcReserveRec = () => {
	uni.navigateTo({
		url: '/pages/allRecord/ncReserveRec/ncReserveRec'
	})
}
// 体检预约记录
let goExaminationResRec = () => {
	uni.navigateTo({
		url: '/pages/allRecord/examinationResRec/examinationResRec'
	})
}
// 病案邮寄记录
let goApplicationRecord = () => {
	uni.navigateTo({
		url: '/pages/allRecord/applicationRecord/applicationRecord'
	})
}
// 问题反馈
let goProblemFeedback = () => {
	uni.navigateTo({
		url: '/pages/allRecord/problemFeedback/problemFeedback'
	})
}
let goInfo = () => {
	uni.navigateTo({
		url: '/pages/info/info'
	})
}
</script>

<style lang="less">
@import url('../../static/fonts/iconfont.css');

#top {
	background-color: #3478f7;
	width: 100%;
	height: 320rpx;

	#header {
		// overflow: hidden;
		image {
			width: 112rpx;
			height: 112rpx;
		}
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		#header-left {
			display: flex;
			justify-content: ;
			align-items: center;
			padding: 40rpx;

			.msg {
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				color: #fff;
				.phone {
					font-size: 12px;
					color: aliceblue;
					padding: 6px 0;
				}
			}

			#head {
				width: 112rpx;
				height: 112rpx;
				border-radius: 50%;
				background-color: pink;
			}
		}

		#header-right {
			padding: 40rpx;

			text {
				font-size: 60rpx;
				color: #ffffff;
			}
		}
	}
}

#card-one {
	background-color: #ffffff;
	width: 686rpx;
	height: 200rpx;
	border: 1px solid #f2f2f2;
	border-radius: 20rpx;
	margin: -90rpx 30rpx 20rpx 30rpx;
	justify-content: space-around;
	display: flex;
	align-items: center;

	text {
		font-size: 28rpx;
	}

	.one-left,
	.one-right {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.bsize {
			width: 82rpx;
			height: 82rpx;
			border-radius: 50%;
			background-color: #e6f1ff;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 46rpx;
				color: #3478f7;
			}
		}
	}
}

//

.record {
	border: 1px solid #f2f2f2;
	border-radius: 20rpx;

	margin: 0rpx 0 70rpx 0;

	.record-item {
		background-color: #ffffff;
		width: 686rpx;
		height: 106rpx;
		border: 1px solid #f2f2f2;
		margin: 0rpx 30rpx;

		display: flex;
		align-items: center;
		justify-content: space-between;

		.record-one {
			display: flex;
			align-items: center;
			padding: 0 35rpx 0 35rpx;

			text {
				font-size: 28rpx;
			}

			.icon {
				width: 82rpx;
				height: 82rpx;
				border-radius: 50%;
				background-color: #e6f1ff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;

				text {
					font-size: 46rpx;
					color: #3478f7;
				}
			}
		}

		.record-two {
			padding: 0 35rpx 0 35rpx;

			text {
				color: #dfdfdf;
			}
		}
	}
}
</style>
